<template>
    <div class="order">
        <div class="content" @scroll="handleScroll">
            <ul class="className">
                <a v-for="(item,key) of goodsList" :key="key" @click="selected(item.id)" v-show="item.goods">
                    <li :class="selectedId === item.id?'selected':''">{{item.name}}</li>
                </a>
            </ul>
        </div>
        <div class="products">
            <ul>
                <div v-for="(i,k) of goodsList" :key="k">
                    <div class="title" v-show="i.id == selectedId">{{i.name}}</div>
                    <li class="product-item" :class="a.is_out?'is_out':''" v-show="i.id == selectedId" v-for="(a,index) of i.goods" :key="index">
                        <i v-show="a.is_out" class="iconfont icon-lianxi-yishouqing over_icon"></i>
                        <img :src="$store.getters.base_url+a.pic" class="img" @click="showImg(a.pic)">
                        <div class="product-text">
                            <p>{{a.name}}</p>
                            <p>{{a.detail}}</p>
                            <p class="product-price"><span>￥{{a.price}}</span></p>
                        </div>
                        <div class="product-num">
                            <i class="iconfont icon-jia" @click="add(k,index,a.id)" v-show="!a.is_out"></i>
                            <p v-show="a.num>0">{{a.num}}</p>
                            <i class="iconfont icon-jian" @click="reduce(k,index,a.id)" v-show="a.num>0 && !a.is_out"></i>
                        </div>
                    </li>
                </div>
            </ul>
        </div>
        <mt-popup
        v-model="popupVisible"
        popup-transition="popup-fade">
        <img :src="$store.getters.base_url+bigImg" class="big_img" @click="()=>{popupVisible=!popupVisible}">
        </mt-popup>
    </div>
</template>
<script>
import { getGoodsList,addCart,plusMinusCart,cartList } from "../api";
import {Toast} from 'mint-ui'
export default {
    name:"order",
    data() {
        return {
           goodsList:[],
           selectedId:1,
           bigImg:"",
           popupVisible:false
        }
    },
    created(){
        this.getCartList();
    },
    methods:{
        showImg(pic){
            this.bigImg = pic;
            this.popupVisible = !this.popupVisible
        },
        reduce(k,index,id){
            let num = this.goodsList[k].goods[index].num
            if(num === 0) return;
            const data = {store_id:parseInt(this.$route.query.id),token:this.$store.getters.token,user_id:this.$store.getters.userInfo.id,goods_id:id,type:-1}
                plusMinusCart(data).then(res=>{
                    console.log(res)
                    delete(this.goodsList[k].goods[index].num);
                    this.$set(this.goodsList[k].goods[index],"num",num-1);
                    // this.$refs.child.getTotalPrice();
                    this.$emit('getTotalPrice',{})
                })
        },
        add(k,index,id){
            let num = this.goodsList[k].goods[index].num
            let data;
            if(num==0){
                data = {store_id:parseInt(this.$route.query.id),token:this.$store.getters.token,user_id:this.$store.getters.userInfo.id,goods_id:id}
                addCart(data).then(res=>{
                    console.log(res);
                    if(res.code !== 200){
                        Toast(res.msg);
                    }else{
                        delete(this.goodsList[k].goods[index].num);
                        this.$set(this.goodsList[k].goods[index],"num",num+1);
                        this.$emit('getTotalPrice',{})
                        
                    }
                })
            }else{
                data = {store_id:parseInt(this.$route.query.id),token:this.$store.getters.token,user_id:this.$store.getters.userInfo.id,goods_id:id,type:1}
                plusMinusCart(data).then(res=>{
                    console.log(res);
                    delete(this.goodsList[k].goods[index].num);
                    this.$set(this.goodsList[k].goods[index],"num",num+1);
                    this.$emit('getTotalPrice',{})
                })
            }
            // item.num+=1;    
            // console.log(this.goodsList[k].goods[index].num);
        },
        handleScroll(el){
            console.log(el)
        },
        delNum(){
            let goodsList = this.goodsList
            for(let i of goodsList){
                            for(let a of i.goods){
                                a.num = 0;
                    }
                }
                this.goodsList = goodsList;
        },
        selected(id){
            console.log(id);
            this.selectedId = id;
            // let doc = document.getElementById(`product${id}`);
            // console.log(doc.scroll);
        },
        getCartList(){
            const data = {store_id:parseInt(this.$route.query.id),token:this.$store.getters.token,user_id:this.$store.getters.userInfo.id}
            cartList(data).then(res=>{
                console.log(res);
                this.cartList = res.data;
                this.$store.commit('ADD_CART',res.data);
                const params = {token:this.$store.getters.token,store_id:this.$route.query.id};
                getGoodsList(params).then(
                    res=>{
                        console.log(res.data)
                        let goodsList = res.data;
                        for(let i of goodsList){
                            if(!i.goods) continue;
                            for(let a of i.goods){
                                a.num = 0;
                                for(let q of this.cartList){
                                    console.log(q.goods_id,a.id);
                                    if(q.num!==0 && q.goods_id == a.id){
                                        a.num = q.num;
                                    }
                                }
                            }
                        }
                        this.selectedId = res.data[0].id;
                        console.log(goodsList);
                        this.goodsList = goodsList;
                    }
                ).catch(err=>{
                    console.log(err);
                })
            })
        }
    }
}
</script>
<style scoped>
    .order {
        display: flex;
        justify-content: space-between;
        height:calc(100vh - 16.7rem);
    }
    .content {
        width: 20%;
        background: #eee;
        overflow: auto;
    }
    .title {
        height: 2rem;
        font-size: 1rem;
        line-height: 2rem;
        padding-left: 1rem;
        font-weight: bolder;
    }
    .product-item {
        width: 90%;
        height: 6rem;
        display: flex;
        align-items: center;
        padding: 0 5%;
        border-bottom: 1px solid #e1e1e1;
        position: relative;
    }
    .product-text {
        width: 70%;
        height: 4rem;
        padding: 0 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .product-price span{
        color: #C20C0C;
        font-weight: bolder;
        font-size: 1rem;
    }
    .product-text p:first-child{
        font-weight: bolder;
        font-size: 1rem;
    }
    .product-text p{
        font-size: 0.8rem;
    }
    .product-item .img{
        width: 4rem;
        height: 4rem;
        border-radius: 5px;
    }
    .product-num {
        width: 20%;
        display: flex;
        flex-direction: row-reverse;
        justify-content: end;
        align-items: flex-end;
        height: 100%;
        padding-bottom: 1.5rem;
    }
    .product-num p {
        margin: 0 0.5rem;
        line-height: 1.5rem;
    }
    .product-num .iconfont {
        font-size: 1.5rem;
        color: #F23D3D;
        font-weight: bolder;
    }
    .products {
        width: 80%;
        overflow: auto;
    }
    .products ul {
        list-style-type: none;
    }
    .className{
        background: #eee;
        text-align: center;
        color: #333;
        height: 60%;
        overflow: auto;
        height:calc(100vh - 16.7rem);
    }
    .className li{
        height: 3rem;
        line-height: 3rem;
        border-bottom: 1px solid #eee;
    }
    .selected {
        background: #fff;
        border-bottom: 1px solid #ccc;
        color: #F23D3D;
    }
    .big_img{
        width: 100%;
    }
    .mint-popup{
        width: 100%;
    }
    .is_out,.is_out .product-price span,.is_out .product-num .iconfont{
        color: rgb(182, 182, 182)!important;
    }
    .over_icon{
        position: absolute;
        font-size: 2rem;
        left: 0;
        top: 0;
        color: #F23D3D;
    }
</style>